import React, { Component } from 'react';
import { Form, Input, Button, Checkbox,message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
// 导入样式
import '../assets/css/login.css';

// 导入query方法
import {query} from '../utils/utils';

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

class Login extends Component {
    render() {
        // 表单校验通过
        const onFinish = values => {
            const {username,password}=values;
            query('/index.php?c=login&a=login','POST',{
                username,
                password,
            }).then(res=>{
                if(res.errcode!=0){
                    return message.error('用户或密码错误!');
                }
                // 登录成功
                message.success('登录成功!');
                sessionStorage.setItem('token',res.token);
                this.props.history.push('/admin/product-list');
            })
            
        };

        const onFinishFailed = errorInfo => {
            console.log('Failed:', errorInfo);
        };

        return (
            <div>
                <div className="login-bg"></div>
                <div className="login-wrap">
                    <div className="login-box">
                        <Form
                            name="normal_login"
                            className="login-form"
                            initialValues={{ remember: false }}
                            onFinish={onFinish}
                        >
                            <Form.Item
                                name="username"
                                rules={[{ required: true, message: '请输入登录住账号' }]}
                            >
                                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[{ required: true, message: '请输入登录密码' }]}
                            >
                                <Input
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    type="password"
                                    placeholder="请输入密码"
                                />
                            </Form.Item>

                            <Form.Item>
                                <Button block type="primary" htmlType="submit" className="login-form-button">
                                    立即登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        );
    }
}

export default Login;
